<!DOCTYPE html>

<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>专辑库 - QQ音乐</title>
    <link rel="stylesheet" href="styles/music.css" />
  </head>
  <style>
    :root {
      --primary-color: #31c27c; /*初始颜色*/
    }
    body {
      margin: 0; /*边界为0*/
      background: #f5f5f5; /*背景颜色*/
      font-family: Microsoft Yahei; /*字体类型*/
      font-size: 14px; /*字体大小*/
    }
    a {
      text-decoration: none; /*删除下划线*/
      color: #000; /*该标签内字体为黑*/
    }
    header {
      height: 90px; /*标题高度*/
      background: white; /*背景颜色*/
      display: flex;
      align-items: center; /*标题居中*/
    }
    .header-inner,
    main {
      padding: 20px; /*内边距*/
      margin: auto; /*居中*/
    }
    .tag-list {
      margin-top: 50px; /*上外边界*/
      margin-bottom: 15px; /*下外边界*/
    }
    .tag-item {
      display: inline-block; /*设置为同一行内的块级元素*/
      padding: 0 8px; /*内边距 0，20px；0，20px*/
      margin-right: 24px; /*右外边界*/
      line-height: 26px; /*与播放表间的距离*/
      color: #000; /*字体颜色*/
      text-decoration: none; /*删除下划线*/
    }
    .tag-active {
      background: var(--primary-color); /*背景颜色为绿色*/
      color: white; /*字体颜色*/
    }
    .tag-item:not(.tag-active):hover {
      /*:not()伪类*/
      color: var(--primary-color);
    }
    .nowrap {
      white-space: nowrap; /*合并空白符*/
      overflow: hidden; /*隐藏溢出内容*/
      text-overflow: ellipsis; /*用省略号表示*/
    }
    .playlist {
      display: grid; /*网格模型*/
      grid-template-columns: repeat(
        auto-fill,
        minmax(200px, 1fr)
      ); /*网格线名称，网格大小*/
      gap: 45px 15px; /*网格间距*/
      margin-bottom: 45px; /*下外边界*/
    }
    .cover-wrap {
      display: flex;/*弹簧格模型*/
      position: relative;/*相对定位*/
      overflow: hidden;/*隐藏溢出内容*/
      width: 100%;/*宽度*/
      margin-bottom: 15px;/*下外边界*/
      align-items: center;/*居中*/
      justify-content: center;
      cursor: pointer;/*光标停在元素上显示相应样式*/
    }
    .cover-img {
      width: 100%;
      transition: all 0.75s;/*渐变效果*/
    }
    .cover-mask {
      position: absolute;/*绝对定位*/
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;/*距离全为0*/
      background: #000;/*背景颜色*/
      opacity: 0;/*透明初始化*/
      transition: all 0.5s;/*渐变效果*/
    }
    .cover-play {
      position: absolute;/*播放键位于图片中间*/
      left: 50%;
      top: 50%;
      margin-left: -35px;
      margin-top: -35px;
      opacity: 0;/*透明初始化*/
      transform: scale(0.7);/*初始缩放*/
      transition: all 0.5s;
    }
    .cover-wrap:hover .cover-mask {
      opacity: 0.2;/*光标悬停透明度改变*/
    }
    .cover-wrap:hover .cover-play {
      opacity: 1;/*播放键透明度改变*/
      transform: scale(1);/*缩放变换*/
    }
    .cover-wrap:hover .cover-img {
      transform: scale(1.07);/*图片缩放变换*/
    }
    .album-title:hover {
      color: var(--primary-color);/*光标悬停颜色变为绿色*/
    }
    .album-author {
      color: #999;
      line-height: 1.6;
    }
    .album-author:hover {
      color: var(--primary-color);/*光标悬停时变为绿色*/
    }
    .album-time {
      color: #999;
    }
    .page {
      display: flex;/*弹簧格模型*/
      align-items: center;/*居中对齐*/
      justify-content: center;/*剧中排列*/
    }
    .page-item {
      display: inline-block;/*设置为同一行内块级元素*/
      color: #a2a2a2;
      line-height: 50px;/*元素间距*/
      padding: 0 20px;/*上下边距为0，左右为20px*/
      margin: 10px;/*上下左右外边距为10px*/
      font-size: 16px;/*字体大小*/
    }
    .page-current,
    .page-item:not(.page-more):hover {
      background: var(--primary-color);/*光标悬停背景颜色变为绿色*/
      color: white;/*光标悬停字体变为白色*/
    }
    footer {
      margin-top: 60px;/*上外边距*/
      background: #333;/*页脚颜色*/
      height: 200px;/*页脚高度*/
    }
  </style>

  <body>
    <header>
      <div class="header-inner">
        <img src="imgs/qqmusic.png" />
      </div>
    </header>
    <main>
      <div class="tag-list">
        <a href="#" class="tag-item tag-active">内地</a>
        <a href="#" class="tag-item">港台</a>
        <a href="#" class="tag-item">欧美</a>
        <a href="#" class="tag-item">韩国</a>
        <a href="#" class="tag-item">日本</a>
        <a href="#" class="tag-item">其他</a>
      </div>
      <div class="playlist">
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">阿云嘎</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000kxqtN0ddCpU_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">说得到做得到</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">胡海泉</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001RNYYW0rHuPV_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">不在见</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">象乐队</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002R4DOj26Q61A_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">长安车马慢</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">优秀少年 (GOOD BOYS)</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003jwWjV32HJIL_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">纸鸢</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">一条小团团ovo</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M0000005wEOc07Udwu_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">软肋</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">李宇春</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hB9KF0JcCBM_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">鸳鸯海棠</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">张晓涵</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001aaIDw2ZOiW3_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">幻蝶</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">安沫英</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000dcpok0A8RP3_2.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">花好月圆</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">周迅</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001YIxlA4gQCEn_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">九尾</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">戴荃</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002gMEz44d5sFf_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">记忆停留</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">蓝心羽</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000JYXBc1g7AxL_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">回声</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">那英</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000Ve7fh4Rt9ab_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">醒</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">Mikann耙耙柑</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003vGHeb105WPr_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">姐姐妹妹站起来</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">马丽</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003LyaIF13Qvfn_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">不是你的我的我</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">VOGUE 5</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M00000404rBw2zdaAR_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">怪我</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">崔子格</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000004ahwy74cpGbM_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">孤独者的旁白</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">王野</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000EEzCA3JIuRX_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">醉仙游</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">小魂</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002TAkS934JbdH_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">我要谢谢你</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">余超颖</a>
          </div>
          <div class="nowrap album-time">2021-04-16</div>
        </div>
      </div>
      <div class="page">
        <a href="#" class="page-item page-current">1</a>
        <a href="#" class="page-item">2</a>
        <a href="#" class="page-item">3</a>
        <a href="#" class="page-item">4</a>
        <span class="page-item page-more">...</span>
        <a href="#" class="page-item">1344</a>
        <a href="#" class="page-item">&gt;</a>
      </div>
    </main>
    <footer></footer>
  </body>
</html>
